/*
  学习目标：JSX-插值表达式-小结
  1. 基础数据类型
    1.1 string number正常显示
    1.2 💥undefined boolean null 不显示
  2. 引用数据类型
    2.1 💥对象不能直接放在插值表达式中
    2.2 💥数组会把每项元素直接渲染到dom中
  3. 其它类型
   3.1 三元
   3.2 逻辑
   3.3 JSX本身

  什么是JSX？
  本质：是createElement的语法糖。
  代表： 可以在JS中写HTML语法，React团队发明。
*/

import React from 'react';
import ReactDOM from 'react-dom';

const isLoading = false;

const divNode = (
  <>
    {/* 三元 */}
    <h2>{isLoading ? '加载中' : '123'}</h2>
    {/* 逻辑且 */}
    <h2>{isLoading ? '加载中' : false}</h2>
    <h2>{!isLoading && '正常显示'}</h2>
    <h3>
      {/* JSX本身 */}
      {<div>123</div>}
    </h3>
  </>
);

ReactDOM.render(divNode, document.getElementById('root'));
